import React, { PureComponent } from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
import color from '../../../../widget/color'
import screen from '../../../../common/screen'
import Button from '../../../../widget/Button'


type Props = {
    info: Object,
    navigation:any,
}
type State = {
}
/**
 * 商品列表Item
 */
class GoodsListView extends PureComponent<Props, State>{
    render() {
        let { info} = this.props
        return (
            <View style={styles.container}>
                <TouchableOpacity style={styles.topContainer} onPress={()=>{
                    this.props.navigation.navigate('DetailScene_GroupPurchase')
                }}>
                    <Image source={require('../../../../img/home/banner.png')} resizeMode='contain' style={styles.icon} />
                </TouchableOpacity>
                <View style={styles.bottomContainer}>
                    <View style={styles.leftView}>
                        <Text numberOfLines={2} style={{flex:2,marginLeft: 10,marginRight: 10,fontSize: 20, }}>{this.props.info.title}</Text>
                        <View style={{ flexDirection: 'row',flex:1}}>
                            <Text style={{ marginLeft: 20,fontSize: 20, color: 'orange' }}>¥{this.props.info.price}</Text>
                            <Text style={{ marginLeft: 10, fontSize: 15, color: 'orange', marginTop: 5 }}>已拼成{this.props.info.successcount}件</Text>
                            <View flex={1}/>
                        </View>
                    </View>
                    <View style={styles.RightView}>
                        <Image source={require('../../../../img/tabbar/tabbar_mine_selected.png')} style={{ marginTop: 60, width: 30, height: 30, }} />
                        <TouchableOpacity style={styles.button}>
                            <Text style={{color:'white',fontWeight:'bold'}} onPress={()=>{
                                this.props.navigation.navigate('DetailScene_GroupPurchase')
                            }}>去拼单</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        width: screen.width * 0.95,
        height:screen.width / 2.1 ,
        borderRadius: 15,    //圆角
        elevation: 2,    //边框效果

    },
    topContainer: {
        flex: 2,
    },
    bottomContainer: {
        flexDirection: 'row',
        flex: 1,
        marginRight: 20,
        height:100,
    },
    leftView: {
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        flex: 4,
        borderRadius: 5,
    },
    RightView: {
        flexDirection: 'row',
        flex:1,
        borderRadius: 5,
    },
    icon: {
        flex:1,
        width: screen.width * 0.95,
        //width: screen.width * 0.95,
        //height:screen.width / 2.1 / 3 * 2,
    },
    button: {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'red',
        marginTop:58,
        marginLeft: 10,
        width: 60,
        height: 30,
        borderRadius: 15,
    },
})
export default GoodsListView